import React, { Component } from 'react';
import { Input, Button, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import logo from '../state/login_03.gif'
import { user_login } from '../utils/api';
import './login.scss'
class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userName: '',
            password: ''
        };
    }
    onChange = (e) => {
        // 判断输入框是什么类型，再传具体的值
        const value = (e.target.type === "checkbox" || e.target.type === "radio") ? e.target.check : e.target.value
        this.setState({
            // e.target.name是一个变量，需要用[]括起来
            [e.target.name]: value
        }, () => {//state不能直接获取最新值，需要在后面通过回调函数来获取更新后的值
            console.log(this.state)
        });
    }
    login = () => {
        // 点击登录时进行表单验证、判断是否符合登陆条件
        if (this.state.userName === '' || this.state.password === '') {
            message.error("手机号或密码不能为空")
        } else if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(String(this.state.userName))) {
            message.error("手机号格式错误")
        } else {
            user_login({ phone: this.state.userName, pass: this.state.password }).then((res) => {
                // console.log(res)
                if (res.data.code == 200) {
                    message.success(res.data.msg)
                    // 跳转路由
                    console.log(res.data)
                    localStorage.setItem("userid", res.data.userinfo.id)
                    localStorage.setItem("token", res.data.token)
                    this.props.history.push('/index')
                } else {
                    message.error(res.data.msg)
                }
            })
        }

    }
    register = () => {
        this.props.history.push('/register')
    }
    render() {
        return (
            <div className='login'>
                <div className="pic">
                    <img src={logo} alt="" />
                </div>
                <div className="form">
                    <Input
                        type='text'
                        placeholder="请输入用户名"
                        className='one'
                        // name值需要和state中的一致
                        name='userName'
                        prefix={<UserOutlined />}
                        //通过value使得变成可控组件
                        value={this.state.userName}
                        // 通过事件进行值的修改
                        onChange={this.onChange}
                    />
                    <Input
                        type='password'
                        placeholder="请输入密码"
                        name='password'
                        prefix={<LockOutlined />}
                        value={this.state.password}
                        onChange={this.onChange}
                    />
                    <Button type="primary" onClick={this.login}>登录</Button>
                    <Button type="primary" className='reg' onClick={this.register}>注册</Button>
                </div>
            </div>
        );
    }
}

export default Login;